<template>
  <div
    @click="clickHandle"
    class="uv-overlay"
    :style="{ zIndex: zIndex, background: overlay ? 'rgba(0,0,0,.7)' : 'transparent' }"
    v-show="show"
  >
    <slot />
  </div>
</template>

<script setup>
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  zIndex: {
    type: String,
    default: '1',
  },
  overlay: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['click'])

const clickHandle = () => {
  emit('click')
}
</script>

<style lang="scss" scoped>
.uv-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overlay-enter-active,
.overlay-leave-active {
  transition: opacity 0.5s ease;
}
.overlay-enter-from,
.overlay-leave-to {
  opacity: 0;
}
</style>
